<template>
  <div class="course-setting">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="120px"
      size="small"
      class="form-scroll"
    >
      <h4 class="knowledge-title">思政要素编辑:</h4>
      <el-row :gutter="20">
        <CoverImg
          :defaultValue="coverImgInfo"
          @e-coverImgId="setCoverImgId"
          :type="11"
        />
        <el-col :span="14">
          <el-form-item
            :label="type == 1 ? '知识点名称' : '资源名称'"
            prop="name"
          >
            <el-input v-model.trim="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="作者">
            <UserFilterSelect
              :defaultValue="form.author"
              @e-sendUserName="setAuthor"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="type == 2 || type == 3">
          <el-form-item label="作者单位">
            <UnitSelect
              :defaultValue="form.sourceUnit"
              @e-unitData="setUnitId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="标签">
            <LabelSelect
              :type="$store.getters.libraryType"
              labelType="2"
              :defaultValue="form.labelValue"
              @e-labelData="setLabelId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="排序">
            <el-input-number
              v-model="form.orderBy"
              :min="1"
              :max="1000"
              size="medium"
              label="排序"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="思政元素">
            <EducationSelect @e-eduData="setEduId" />
          </el-form-item>
        </el-col>
        <el-col :span="14" v-if="$store.getters.libraryType == 1">
          <el-form-item label="思政目标">
            <el-input v-model.trim="form.eduTarget"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="扩展字段" class="extend-wrap">
            <div class="extend" v-for="(v, i) in extendForm" :key="i">
              <el-input
                class="extend-name"
                v-model.trim="v.name"
                placeholder="字段名称"
              ></el-input>
              <span class="extend-symbol">:</span>
              <el-input
                class="extend-content"
                v-model.trim="v.content"
                placeholder="字段内容"
              ></el-input>
              <div class="extend-button">
                <span
                  v-if="i == 0"
                  @click="addExtend()"
                  class="el-icon-circle-plus"
                  title="新增字段"
                ></span>
                <span
                  v-if="i != 0"
                  @click="delExtend(i)"
                  class="el-icon-remove"
                  title="删除字段"
                ></span>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item :label="strategyName">
            <UEditor ref="ueditor" :defaultMsg="form.strategy" />
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="knowledge-title">辅助素材附件:</h4>
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item label="素材名称">
            <el-input v-model.trim="form.resName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="素材简介">
            <el-input
              type="textarea"
              placeholder="请输入素材简介"
              v-model="form.resDes"
              maxlength="500"
              :rows="4"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="添加素材">
            <UploadFile multiple @e-fileData="saveFile" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="save">
      <el-button @click="submitForm('form')" type="custom" v-preventReClick
        >提 交</el-button
      >
    </div>
  </div>
</template>
<script>
import { sysKnowledgeAdd } from '@/api/admin/courseLibrary/sysKnowledge.js'
import { KnowledgeSetInfo } from '../../mixins/KnowledgeSetInfo'
export default {
  mixins: [KnowledgeSetInfo],
  components: {
    EducationSelect: () => import('@/components/educationSelect'),
    CoverImg: () => import('@/components/coverImg'),
    UserFilterSelect: () => import('@/components/userFilterSelect'),
    UploadFile: () => import('@/components/uploadFile'),
    LabelSelect: () => import('@/components/labelSelect'),
    UnitSelect: () => import('@/components/unitSelect'),
  },
  data() {
    return {
      type: this.$route.meta.type,
      restaurants: [],
      coverImgInfo: null,
      checkedData: {},
      filesList: [],
      form: {
        id: '',
        name: '', //知识名称
        author: this.$store.getters.username, //作者
        content: '', //内容
        orderBy: 10, //排序
        // eduId: "", //思政元素ID
        eduTarget: '', //思政目标
        pid: '0', //父级节点
        sourceUnit: '', //提供单位
        strategy: '', //融入策略
        resName: '', //素材名称
        resDes: '', //素材简介
        labelType: this.$store.getters.libraryType,
        labelValue: '',
        sysKnowledgeFilesList: [], //附件
        sysKnowledgeEduList: [], //思政元素ID
        sysKnowledgeChapterList: [
          {
            chapterId: this.$route.query.chapterId || 0,
            courseId: this.$store.getters.courseId,
            type: this.$store.getters.libraryType,
          },
        ],
      },
      extendForm: [
        {
          name: '',
          content: '',
        },
      ],
      rules: {
        name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      },
    }
  },
  computed: {
    strategyName() {
      return this.$store.getters.libraryType == 1 ? '融入策略' : '使用建议'
    },
  },
  mounted() {},
  methods: {
    setAuthor(v) {
      this.form.author = v
    },
    setCoverImgId(v) {
      this.form.fileId = v
    },
    saveFile(v) {
      this.filesList = v
    },
    setLabelId(v) {
      this.form.labelValue = v
    },
    setUnitId(v) {
      this.form.sourceUnit = v || ''
    },
    submitForm(form) {
      this.setExtend()
      this.setEducationList()
      this.setFileList()
      this.form.labelValue = this.form.labelValue.toString()
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.form.type = this.$route.meta.type
          this.add()
        }
      })
    },
    //设置附件信息
    setFileList() {
      this.form.sysKnowledgeFilesList = []
      if (!this.filesList) return
      this.filesList.forEach((v) => {
        let obj = {
          fileId: v.id,
        }
        this.form.sysKnowledgeFilesList.push(obj)
      })
    },
    //新增
    add() {
      this.form.strategy = this.$refs.ueditor.message
      sysKnowledgeAdd(this.form).then((res) => {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        let name = this.$store.getters.libraryEnName + '-knowledge-list'
        this.$router.push({ name })
      })
    },
    addExtend() {
      if (this.extendForm.length >= 3) {
        this.$message({
          message: '最多添加3条扩展字段',
          type: 'warning',
        })
        return
      }
      this.extendForm.push({ name: '', content: '' })
    },
    delExtend(idx) {
      this.extendForm.splice(idx, 1)
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      for (let key in this.form) {
        this.form[key] = ''
      }
      this.form.author = this.$store.getters.username
      this.form.courseType = this.$route.meta.type
    },
  },
}
</script>
<style scoped>
.course-setting {
  padding-bottom: 20px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.form-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 60px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.course-setting .save {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding-top: 10px;
  padding-left: 120px;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ddd;
}
.extend {
  position: relative;
  margin-bottom: 15px;
}
.extend-name {
  width: 25%;
}
.extend-symbol {
  display: inline-block;
  width: 5%;
  text-align: center;
}
.extend-content {
  width: 60%;
}
.extend-button {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  width: 30px;
  height: 40px;
  text-align: center;
}
.extend-button span {
  display: inline-block;
  font-size: 28px;
  color: #409eff;
  cursor: pointer;
  line-height: 40px;
}
.extend-button span.el-icon-circle-plus {
  color: #67c23a;
}
.extend-button span.el-icon-remove {
  color: #f56c6c;
}
.knowledge-title {
  height: 42px;
  line-height: 42px;
  margin-bottom: 20px;
  padding-left: 10px;
  color: #333;
  font-size: 14px;
  width: 100%;
  border-bottom: 1px solid #ddd;
}
</style>